<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@page import="org.apache.commons.lang3.StringUtils"%>
<%@page import="fi.foyt.cs.persistence.domainmodel.oauth.AuthorizedClient"%>
<%@page import="fi.foyt.cs.api.SystemProperty"%>
<%@page import="fi.foyt.cs.Settings"%>
<%@page import="fi.foyt.cs.controller.OAuthController"%>

<%
  OAuthController oAuthController = new OAuthController();  
  String clientId = Settings.getValue(SystemProperty.HTML_CLIENT);
  AuthorizedClient authorizedClient = oAuthController.findAuthorizedClientByClientId(clientId);
  if (authorizedClient != null) {
    pageContext.setAttribute("htmlClientId", authorizedClient.getClientId());
    pageContext.setAttribute("htmlClientSecret", authorizedClient.getClientSecret());
    pageContext.setAttribute("htmlReturnUrl", authorizedClient.getReturnUrl());  
    pageContext.setAttribute("clientToken", session.getAttribute("clientOAuth"));
  }
%>
     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Mobile client tester</title>
    <link type="text/css" rel="stylesheet" href="tester.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/script/prototype/prototype.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/script/criminalsouls-api/criminalsouls-api.js"></script>
    <script type="text/javascript">     
      function updateZoom() {
        var zoomSelect = $('zoom');
        var transform = '';
        
        switch (parseFloat(zoomSelect.value)) {
          case 0.5:
            transform = 'translateX(-120px) translateY(-200px) scale(0.5)';
          break;
          case 1:
          break;
        }
        
        $('frameContainer').setAttribute('style', '-moz-transform:' + transform + '; -webkit-transform: ' + transform);
      }
     
      document.observe("dom:loaded", function() {
	      var csApi = new CriminalSoulsApi('${htmlClientId}', '${htmlClientSecret}', '${htmlReturnUrl}', '${clientToken}');
			  if (!csApi.isAuthorized()) {
			    csApi.authorize();
			  } else {
				  navigator.geolocation.getCurrentPosition(function(position) {
					  $$('input[name="geoLat"]')[0].value = position.coords.latitude;
			      $$('input[name="geoLng"]')[0].value = position.coords.longitude;
				  });
				  
				  Event.observe($('changeGeoLocation'), "click", function (event) {
					  Event.stop(event);
					  var frameDocument = $('clientFrame').contentDocument;
					  var frameWindow = frameDocument.parentWindow||frameDocument.defaultView;
					  frameWindow.mockPosition($$('input[name="geoLat"]')[0].value, $$('input[name="geoLng"]')[0].value);					  
				  });
				  
				  Event.observe($('changeZoom'), "click", function (event) {
				    updateZoom();
				  });

				  updateZoom();				  
				  $('clientFrame').src = 'main.jsp?oAuthToken=' + csApi.getOAuthToken();
	      }
      });			  
    </script>

  </head>
  <body>
    <div id="frameContainer">
      <iframe id="clientFrame" width="480" height="800" frameBorder="1" src="about:blank"> </iframe>
    </div>
    <div id="controlsContainer">
      
      <div class="controlContainer">
        <div class="controlTitle"> Zoom </div>
        <div class="controlSettings">
          <div class="controlInputs">
            <select name="zoom" id="zoom">
              <option value="0.5">Real</option>
              <option value="1.0" selected="selected">Double</option>
            </select>
          </div>
          <div class="controlApplyContainer">  
            <button class="controlApplyButton" id="changeZoom">Apply</button>
          </div>
        </div>
      </div>
      
      <div class="controlContainer">
        <div class="controlTitle"> Screen size </div>
        <div class="controlSettings">
	        <div class="controlInputs">
	          <input type="text" name="screenWidth" value="480"/> x <input type="text" name="screenHeight" value="800"/>
	        </div>
	        <div class="controlApplyContainer">  
	          <button class="controlApplyButton" id="changeSize" disabled="disabled">Apply</button>
	        </div>
        </div>
      </div>
      
      <div class="controlContainer">
        <div class="controlTitle"> Geo Location </div>
        <div class="controlSettings">
          <div class="controlInputs">
            <input type="text" name="geoLat" value=""/> , <input type="text" name="geoLng" value=""/>
          </div>
          <div class="controlApplyContainer">  
            <button class="controlApplyButton" id="changeGeoLocation">Apply</button>
          </div>
        </div>
      </div>
      
      <div class="controlContainer">
        <div class="controlTitle"> OAuth </div>
          <div class="controlSettings"> 
             <button class="controlApplyButton" onclick="window.location.href='/client/logout.jsp'">Relogin</button>
          </div>
      </div>
    </div>
  </body>
</html>